<template>
  <view class="app">
    <view class="back-btn mix-icon icon-xiangzuo" @click="navBack"></view>
    <view class="page-tip">图标管理</view>
    <view class="icon-wapper">
      <view @click="showIconText" class="mix-icon icon-fanhui"></view>
      <view class="mix-icon icon-shoujihaoma"></view>
      <view class="mix-icon icon-close"></view>
      <view class="mix-icon icon-xingbie-nv"></view>
      <view class="mix-icon icon-wuliuyunshu"></view>
      <view class="mix-icon icon-jingpin"></view>
      <view class="mix-icon icon-zhangdanmingxi01"></view>
      <view class="mix-icon icon-tixian1"></view>
      <view class="mix-icon icon-chongzhi"></view>
      <view class="mix-icon icon-wodezhanghu_zijinjilu"></view>
      <view class="mix-icon icon-tixian"></view>
      <view class="mix-icon icon-qianbao"></view>
      <view class="mix-icon icon-guanbi1"></view>
      <view class="mix-icon icon-daipingjia"></view>
      <view class="mix-icon icon-daifahuo"></view>
      <view class="mix-icon icon-yue"></view>
      <view class="mix-icon icon-wxpay"></view>
      <view class="mix-icon icon-alipay"></view>
      <view class="mix-icon icon-tishi"></view>
      <view class="mix-icon icon-shoucang-1"></view>
      <view class="mix-icon icon-gouwuche"></view>
      <view class="mix-icon icon-shoucang"></view>
      <view class="mix-icon icon-home"></view>
      <view class="mix-icon icon-bangzhu1"></view>
      <view class="mix-icon icon-xingxing"></view>
      <view class="mix-icon icon-shuxiangliebiao"></view>
      <view class="mix-icon icon-hengxiangliebiao"></view>
      <view class="mix-icon icon-guanbi2"></view>
      <view class="mix-icon icon-down"></view>
      <view class="mix-icon icon-arrow-top"></view>
      <view class="mix-icon icon-xiaoxi"></view>
      <view class="mix-icon icon-saoma"></view>
      <view class="mix-icon icon-dizhi1"></view>
      <view class="mix-icon icon-ditu-copy"></view>
      <view class="mix-icon icon-lajitong"></view>
      <view class="mix-icon icon-bianji"></view>
      <view class="mix-icon icon-yanzhengma1"></view>
      <view class="mix-icon icon-yanjing"></view>
      <view class="mix-icon icon-mima"></view>
      <view class="mix-icon icon-biyan"></view>
      <view class="mix-icon icon-iconfontweixin"></view>
      <view class="mix-icon icon-shouye"></view>
      <view class="mix-icon icon-daifukuan"></view>
      <view class="mix-icon icon-pinglun-copy"></view>
      <view class="mix-icon icon-lishijilu"></view>
      <view class="mix-icon icon-shoucang_xuanzhongzhuangtai"></view>
      <view class="mix-icon icon-share"></view>
      <view class="mix-icon icon-shezhi1"></view>
      <view class="mix-icon icon-shouhoutuikuan"></view>
      <view class="mix-icon icon-dizhi"></view>
      <view class="mix-icon icon-yishouhuo"></view>
      <view class="mix-icon icon-xuanzhong"></view>
      <view class="mix-icon icon-xiangzuo"></view>
      <view class="mix-icon icon-iconfontxingxing"></view>
      <view class="mix-icon icon-jia2"></view>
      <view class="mix-icon icon-sousuo"></view>
      <view class="mix-icon icon-xiala"></view>
      <view class="mix-icon icon-xia"></view>
      <view class="mix-icon icon--jianhao"></view>
      <view class="mix-icon icon-you"></view>
      <view class="mix-icon icon-yk_yuanquan"></view>
      <view class="mix-icon icon-xing"></view>
      <view class="mix-icon icon-guanbi"></view>
      <view class="mix-icon icon-loading"></view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  onLoad() {},
  methods: {
    navBack() {
      uni.navigateBack();
    },
    showIconText(e) {
      console.log('🚀 ~ showIconText ~ e:', e);
    },
  },
};
</script>

<style>
page {
  background: #f7f8f9;
}
</style>
<style scoped lang="scss">
.app {
  padding-top: calc(var(--status-bar-height) + 40rpx);
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-image: url('../../static/page_bg.png');
  background-repeat: no-repeat;
  background-size: 100% 600rpx;
}
.back-btn {
  position: absolute;
  left: 20rpx;
  top: calc(var(--status-bar-height) + 20rpx);
  z-index: 90;
  padding: 20rpx;
  font-size: 34rpx;
  color: white;
}
.page-tip {
  position: absolute;
  left: 50%;
  top: calc(var(--status-bar-height) + 34rpx);
  z-index: 90;
  margin-left: -60rpx;
  font-size: 34rpx;
  color: white;
  line-height: 34rpx;
}
.icon-wapper {
  margin: 80rpx 50rpx;
  display: flex;
  flex-wrap: wrap;
  .mix-icon {
    border-radius: 32rpx;
    border: 1px solid gray;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10rpx;
    width: 64rpx;
    height: 64rpx;
  }
}
</style>
